<template>
  <!-- 积分管理 -->
  <div>
    <!-- 卡片 -->
    <el-card>
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <div class="clearfix_left">
          <i class="el-icon-arrow-left"></i>
          <h3>返回</h3>
        </div>
      </div>
      <!-- 获取积分 -->
      <div class="get_integral">获取积分</div>
      <!-- 表单区域 -->
      <el-form
        size="medium"
        label-width="192px"
        :label-position="labelPosition"
        :model="formGetintegral"
        class="integral_inp inteLeft"
      >
        <el-form-item label="邀请新用户:">
          <el-input v-model="formGetintegral.newUser"></el-input>
          <span>积分/人</span>
        </el-form-item>
        <el-form-item label="被邀请人充值月会员:">
          <el-input v-model="formGetintegral.mVip"></el-input>
          <span>积分/人</span>
        </el-form-item>
        <el-form-item label="被邀请人充值季会员:">
          <el-input v-model="formGetintegral.jVip"></el-input>
          <span>积分/人</span>
        </el-form-item>
        <el-form-item label="被邀请人充值年会员:">
          <el-input v-model="formGetintegral.yVip"></el-input>
          <span>积分/人</span>
        </el-form-item>
        <el-form-item label="被邀请人充值350积分:">
          <el-input v-model="formGetintegral.tVip"></el-input>
          <span>积分/人</span>
        </el-form-item>
        <el-form-item label="被邀请人充值600积分:">
          <el-input v-model="formGetintegral.sVip"></el-input>
          <span>积分/人</span>
        </el-form-item>
        <el-form-item label="被邀请人充值900积分:">
          <el-input v-model="formGetintegral.nVip"></el-input>
          <span>积分/人</span>
        </el-form-item>
        <!-- 消耗积分 -->
        <div class="del_integral">消耗积分</div>
        <el-form-item label="抽奖:" label-width="53px">
          <el-input v-model="formGetintegral.nVip"></el-input>
          <span>积分/人</span>
        </el-form-item>
        <!-- 注意 -->
        <p>注:各个商品所需积分请在商品详情更改，此处不可更改。</p>
        <!-- 按钮 -->
        <el-button>保存</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      formGetintegral: {
        newUser: 50,
        mVip: 50,
        jVip: 50,
        yVip: 50,
        tVip: 50,
        sVip: 50,
        nVip: 50
      }
    };
  }
};
</script>

<style>
.get_integral,
.del_integral {
  height: 26px;
  border-left: 4px solid #3f51b5;
  padding-left: 10px;
  color: #212121;
  margin-left: 80px;
  font-size: 20px;
}
.integral_inp .el-input {
  width: 108px;
  height: 36px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.inteLeft {
  margin-top: 26px;
  margin-left: 80px;
}
.el-form-item__label {
  font-size: 18px;
  color: #212121;
}
 .integral_inp .el-form span {
  font-size: 18px;
  color: #757575;
}
 .integral_inp .el-input__inner {
  text-align: center;
}
.del_integral {
  margin-left: 0;
  margin-bottom: 26px;
}
.el-form p {

font-size: 14px;

color: #ff3c00;
}
.el-form .el-button {
    width: 200px;
height: 50px;
background: #3f51b5;
border-radius: 5px;
}
.integral_inp .el-button span {
font-size: 24px;
color: #ffffff;
}
</style>